<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: -0px;
            top: 0px;
            width: 3000px;
        }


        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
    <!-- 引入相关js -->
    <script src="js/get.js"></script>
    <script src="js/animate.js"></script>
</head>

<body>
    <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="images/laugh01.gif" width="500" height="200" /></li>
                <li><img src="images/laugh02.gif" width="500" height="200" /></li>
                <li><img src="images/laugh03.gif" width="500" height="200" /></li>
                <li><img src="images/laugh04.gif" width="500" height="200" /></li>
                <li><img src="images/laugh05.gif" width="500" height="200" /></li>
                <li><img src="images/laugh01.gif" width="500" height="200" /></li>
            </ul>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>

    <script>
        // 需求4：无限自动轮播
        /*
            思路分析
            1. 设定一个定时器：每隔一段事件调用 rightClick函数
            2. 鼠标移入的时候：关闭自动轮播
            3. 鼠标移出的时候：开启自动轮播
        */
        // 1. 设定一个定时器：每隔一段事件调用 rightClick函数
        let timeId = setInterval(function () {
            // 调用向右轮播
            rightClick();
        }, 1500);


        // 需求3：无缝轮播，当看到最后一张的时候，再向右：保证轮播效果，依然是从右向左滑动
        /*
            核心技术点：再最后添加一张图片，就是第一张
            形成无缝：不是真正的无缝，视觉差（当第五张看到第六张（实际第一张）），如果再向右：先瞬移到真正的第一张（用户看不到），再向左动画

            1. 将第一个li复制一份，放到最后：形成6张图
            2. 正常点击：index++，如果index = ul.children.length 
            2.1 瞬移到第一张
            2.2 让index指向下一张：index = 1


            向左逻辑
            1. 如果当前已经是第一张：index = 0，如果再点击向左：想看原来的最后一张（第五章）
            * 瞬移到最后一张：第六张
            * index = ul.children.length - 2
        */

        // 需求1：鼠标移入大盒子显示箭头，移出隐藏箭头

        // 相关元素获取
        let box = get('#box');
        let screen = get('.screen');
        let ul = get('.screen>ul');
        let arr = get('#arr');
        let left = get('#left');
        let right = get('#right');

        // box鼠标移入效果
        box.onmouseover = function () {
            arr.style.display = 'block';
            // 2. 鼠标移入的时候：关闭自动轮播
            clearInterval(timeId);
        };

        box.onmouseout = function () {
            arr.style.display = '';
            // 3. 鼠标移出的时候：开启自动轮播
            timeId = setInterval(function () {
                // 调用向右轮播
                rightClick();
            }, 1500);
        };

        // 需求2：点击向右箭头，查看后面一张图片，点击向左箭头，查看左边一张图片 

        /*
            思路分析：点击向右的箭头

            问题？如何知道当前是第几张图片？定义一个全局变量记录图片位置：let index = 0，向右+1，向左-1

            1. 定义全局变量：记录当前被看的图片（li）的索引，默认为0，let index = 0;
            2. 向右点击事件：有名函数
            3. 事件处理
            3.1 让索引 + 1：index++
            * index能否超出li的数量：一旦到了超过最后一张，回到第一张
            3.2 让ul移动：- screen对应的宽度 * index（一定是负数）
        */

        // 1. 定义全局变量：记录当前被看的图片（li）的索引，默认为0，let index = 0;
        let index = 0;
        // 2. 向右点击事件：有名函数
        right.onclick = rightClick;         // 有名函数

        function rightClick() {
            // 3. 事件处理
            // 3.1 让索引 + 1：index++
            index++;
            // * index能否超出li的数量：一旦到了超过最后一张，回到第一张
            if (index == ul.children.length) {
                // 动态改变：原来li为5个，现在加了1个：6个
                // 本质是想看第二张
                // 2.1 瞬移到第一张
                ul.style.left = '0px';
                // 2.2 让index指向下一张：index = 1
                index = 1;
            }
            // 3.2 让ul移动：- screen对应的宽度 * index（一定是负数）
            animateSlow(ul, -index * screen.offsetWidth, 'left');
        }

        // 向左事件
        left.onclick = function () {
            // 1. index减去1
            index--;

            // 2. 判定是不是已经超出了第一张
            if (index < 0) {
                // index = ul.children.length - 1; // 最后一张下标
                // 1. 如果当前已经是第一张：index = 0，如果再点击向左：想看原来的最后一张（第五章）
                // * 瞬移到最后一张：第六张
                ul.style.left = - (ul.children.length - 1) * screen.offsetWidth + 'px';
                console.log(ul.children.length);
                // * index = ul.children.length - 2
                index = ul.children.length - 2;
            }

            // 3. 移动
            animateSlow(ul, -index * screen.offsetWidth, 'left');
        };


    </script>
</body>

</html>